<template>
  <div class="app-container">
    <!-- tab -->
    <div class="">
      <div style="margin-bottom: 10px;">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="16">
            <div class="left-panel">
              <el-button type="text" icon=""></el-button>
            </div>
          </el-col>
          <el-col :xs="24" :sm="8">
            <div class="right-panel el-button-group">
              <el-button class="" icon="el-icon-refresh" size="mini" @click="resetting"></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead"
                      :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 订单列表 -->
      <el-row :gutter="20">
        <el-col class="">
          <el-table ref="tablerefs" v-loading="loading" highlight-current-row :data="tableData" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%" height="500">
            <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label" :width="
                  tableTheadOptions[fruit].width
                    ? tableTheadOptions[fruit].width + 'px'
                    : 'auto'
                " align="center">
              <template slot-scope="scope">
                <div v-if="fruit == 'merchant_name'">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.merchant.name + ''"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row.merchant ? scope.row.merchant.name : "-" }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else-if="fruit == 'number'">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.goods.number + ''"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row.goods ? scope.row.goods.number : "-" }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else-if="fruit == 'goods_name'">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.goods.goods_name + ''"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row.goods ? scope.row.goods.goods_name : "-" }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else-if="fruit == 'goods_id'">
                  {{ scope.row.goods.goods_id }}
                </div>
                <div v-else-if="fruit == 'goods_image'">
                  <div style="width: 40px; height: 40px; margin: 0 auto">
                    <el-image
                      :src="scope.row.goods ? scope.row.goods.goods_image : ''"
                      :preview-src-list="[
                        scope.row.goods ? scope.row.goods.goods_image : '',
                      ]"
                    />
                  </div>
                </div>
                <div v-else-if="fruit == 'sku_name'">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.goods.sku_name + ''"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row.goods ? scope.row.goods.sku_name : "-" }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else-if="fruit == 'real_name'">
                  {{ scope.row.consignee_info.real_name }}
                </div>
                <div v-else-if="fruit == 'real_cellphone'">
                  {{ scope.row.consignee_info.real_cellphone }}
                </div>
                <div v-else-if="fruit == 'address'">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.consignee_info.address + ''"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row.consignee_info ? scope.row.consignee_info.address : "-" }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else-if="fruit == 'user_name'">
                  {{ scope.row.merchant.user_name }}
                </div>
                <div v-else-if="fruit == 'user_cellphone'">
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row.merchant.user_cellphone + ''"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row.merchant ? scope.row.merchant.user_cellphone : "-" }}
                    </div>
                  </el-tooltip>
                </div>
                <div v-else-if="fruit == 'status'">
                  <span style="color: #f86d60;" v-if="scope.row.status == 2"
                    >待发货</span
                  >
                  <span style="color: #3391f8;" v-if="scope.row.status == 3"
                    >待收货</span
                  >
                  <span style="color: #666;" v-if="scope.row.status == 5"
                    >已取消</span
                  >
                  <span style="color: #13ce66;" v-if="scope.row.status == 4"
                    >已完成</span
                  >
                </div>
                <div v-else-if="fruit == 'name'">
                  {{ scope.row.merchant.name }}
                </div>
                <div v-else-if="fruit == 'id'">
                  {{ scope.row.merchant.id }}
                </div>
                <div v-else>
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row[fruit] + ''"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" width="120" prop="address" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="detailsDialogway(scope.row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table></el-col>
      </el-row>
      <el-row>
        <el-col style="text-align: right">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="query.page" :page-sizes="[10, 20, 30, 40]" :page-size="query.count"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <!--  -->
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="自提信息"
      size="60%"
      :withHeader="false"
      :visible.sync="detaildialog"
      @close="drawerHandleClose"
      :show-close="true"
    >
      <div style="position: relative" v-loading="detailLoading">
        <div class="drawerTitle">
          <span>自提信息</span>
          <div class="close" @click="drawerHandleClose">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
        <div class="drawerContent" style="padding: 10px 20px;">
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder"></div>
              <div class="text">订单信息</div>
            </div>
            <div class="right">
              <el-button
                style="margin: 5px; color: #fff"
                v-if="detailsObj.status == 2"
                type="warning"
                size="mini"
                @click="editNotesWay(detailsObj,2)">
                <div style="color: #fff">去发货</div>
              </el-button>
            </div>
          </div>
          <div style="padding: 0 10px">
            <el-descriptions :column="2">
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="订单编号">
                {{
                  detailsObj.order_no ? detailsObj.order_no : "-"
                }}</el-descriptions-item
              >
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="订单状态">
                <div style="color: #13ce66;" v-if="detailsObj.status ? detailsObj.status == 4 : false"
                  >已完成</div>
                <div style="color: #3391f8;" v-if="detailsObj.status ? detailsObj.status == 3 : false"
                  >待收货</div>
                <div style="color: #f86d60;" v-if="detailsObj.status ? detailsObj.status == 2 : false"
                  >待发货</div></el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder"></div>
              <div class="text">商品信息</div>
            </div>
            <div class="right"></div>
          </div>
          <div style="padding: 0 10px">
            <el-descriptions :column="2">
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="商品名称"
              >
                {{ detailsObj.goods ? detailsObj.goods.goods_name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="商品ID"
              >
                {{ detailsObj.goods ? detailsObj.goods.goods_id : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="购买数量"
              >
                {{ detailsObj.goods ? detailsObj.goods.number : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="规格名称"
              >
                {{ detailsObj.goods ? detailsObj.goods.sku_name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="商品图片"
              >
                <div style="width: 40px; height: 40px">
                  <el-image
                    :src="detailsObj.goods ? detailsObj.goods.goods_image : ''"
                    :preview-src-list="[
                      detailsObj.goods ? detailsObj.goods.goods_image : '',
                    ]"
                  />
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder"></div>
              <div class="text">供应商信息</div>
            </div>
            <div class="right"></div>
          </div>
          <div style="padding: 0 10px">
            <el-descriptions :column="2">
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="供应商名称"
              >
                {{ detailsObj.merchant ? detailsObj.merchant.name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="供应商ID"
              >
                {{ detailsObj.merchant ? detailsObj.merchant.id : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="负责人"
              >
                {{ detailsObj.merchant ? detailsObj.merchant.user_name : "-" }}
              </el-descriptions-item>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="负责人电话"
              >
                {{
                  detailsObj.merchant ? detailsObj.merchant.user_cellphone : "-"
                }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder"></div>
              <div class="text">收货信息</div>
            </div>
            <div class="right"></div>
          </div>
          <div style="padding: 0 10px">
            <el-descriptions :column="2">
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="收货人"
              >
                {{
                  detailsObj.consignee_info
                    ? detailsObj.consignee_info.real_name
                    : "-"
                }}
              </el-descriptions-item>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="收货人电话"
              >
                {{
                  detailsObj.consignee_info
                    ? detailsObj.consignee_info.real_cellphone
                    : "-"
                }}
              </el-descriptions-item>
              <el-descriptions-item
                labelClassName="descriptionsLabel"
                content-class-name="descriptionsLabel"
                label="收货地址"
              >
                {{
                  detailsObj.consignee_info
                    ? detailsObj.consignee_info.address
                    : "-"
                }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
    getOrderSelfList,
    getOrderSelfDetail
  } from "@/api/merchant/index";
  const tableTheadOption = {
    order_no: {
      label: "订单号",
      field: "order_no",
    },
    real_name: {
      label: "收货人",
      field: "real_name",
    },
    real_cellphone: {
      label: "收货电话",
      field: "real_cellphone",
    },
    address: {
      label: "收货地址",
      field: "address",
    },
    number: {
      label: "数量",
      field: "number",
    },
    goods_name: {
      label: "商品名称",
      field: "goods_name",
    },
    merchant_name:{
      label: "商户名称",
      field: "merchant_name",
    },
    goods_image: {
      label: "商品主图",
      field: "goods_image",
    },
    sku_name: {
      label: "规格名称",
      field: "sku_name",
    },
    status: {
      label: "订单状态",
      field: "status",
    },
    id: {
      label: "商户ID",
      field: "id",
    },
    name: {
      label: "店铺名称",
      field: "name",
    },
    user_name: {
      label: "负责人",
      field: "user_name",
    },
    user_cellphone: {
      label: "负责人电话",
      field: "user_cellphone",
    },
  };
  const allTableThead = [
    "order_no",
    "real_name",
    "real_cellphone",
    "address",
    "number",
    "goods_name",
    "merchant_name",
    "goods_image",
    "status",
    "id",
    "name",
    "user_name",
    "user_cellphone",
  ];
  const defaultTableThead = [
   "order_no",
   "goods_name",
   "number",
   "real_name",
   "real_cellphone",
   "address",
   "status",
  ];
  export default {
    name: "merselfPickup",
    components: {

    },
    data() {
      return {
        id: "",
        loading: true,
        currentPage4: 1, //页码
        total: 0,
        query: {
          goods_id: "",
          pageSize: 10,
          page: 1,
        },
        tableData: [], //列表
        tableKey: 1, // table key
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        detailLoading: false,
        detaildialog:false,
        detailsObj:{}
      };
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
        this.$nextTick(() => {
          this.$refs.tablerefs.doLayout();
        });
      },
    },
    mounted() {},
    methods: {
      drawerHandleClose() {
        this.detaildialog = false;
      },
      detailsDialogway(row) {
        this.detaildialog = true;
        this.detailLoading = true;
        getOrderSelfDetail({ id: row.order_id }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.detailLoading = false;
            this.detaildialog = false;
            return this.$messages.error(res.msg);
          }
          this.detailLoading = false;
          this.detailsObj = res.data;
        });
      },
      //重置
      resetting() {
        this.getlist(this.query.goods_id);
      },
      //产品列表
      getlist(id) {
        this.loading = true;
        this.query.goods_id = id
        getOrderSelfList(this.query).then((res) => {
          this.loading = false;
          this.currentPage4 = res.data.currentPage;
          this.total = res.data.total;
          this.tableData = res.data.list;
        });
      },
      //页码
      handleSizeChange(val) {
        this.query.pageSize = val
        this.getlist(this.query.goods_id);
      },
      handleCurrentChange(val) {
        this.query.page = val
        this.getlist(this.query.goods_id);
      },
    },
  };
</script>
<style lang="scss" scoped>
</style>
<style lang="scss">
  .el-divider--horizontal {
    margin: 10px 0 !important;
  }
  .search-form-item {
    padding-bottom: 10px;
    padding-right: 20px;
    .el-form-item__label {
      font-size: 12px;
      font-weight: 500;
    }
    .el-input {
      width: 180px;
    }
  }
</style>
